<template lang="">
    <div class="Top">
        <div class="top">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" style="left:500px"
                class="demo-ruleForm">
                <el-form-item label="高管编号">
                    <el-input :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="高管名称" prop="name">
                    <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="出生日期" required>
                    <el-col :span="11">
                        <el-form-item>
                            <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.birth"
                                style="width: 270px;">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-form-item>
                <el-form-item label="职务" prop="job">
                    <el-select v-model="ruleForm.job" placeholder="请选择职务">
                        <el-option label="法人代表" value="法人代表"></el-option>
                        <el-option label="公司董事长" value="公司董事长"></el-option>
                        <el-option label="公司总经理/厂长/CEO" value="公司总经理/厂长/CEO"></el-option>
                        <el-option label="财务部主管/CEO" value="财务部主管/CEO"></el-option>
                        <el-option label="授权经办人" value="授权经办人"></el-option>
                        <el-option label="部门经理" value="部门经理"></el-option>
                        <el-option label="董事" value="董事"></el-option>
                        <el-option label="监事" value="监事"></el-option>
                        <el-option label="实际控制人" value="实际控制人"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                    <el-select v-model="ruleForm.sex" placeholder="请选择性别">
                        <el-option label="男" value="男"></el-option>
                        <el-option label="女" value="女"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="学历" prop="education">
                    <el-select v-model="ruleForm.education" placeholder="请选择学历">
                        <el-option label="研究生" value="研究生"></el-option>
                        <el-option label="大学专科" value="大学专科"></el-option>
                        <el-option label="中专/中等技校" value="中专/中等技校"></el-option>
                        <el-option label="技术学校" value="技术学校"></el-option>
                        <el-option label="高中" value="高中"></el-option>
                        <el-option label="初中" value="初中"></el-option>
                        <el-option label="小学" value="小学"></el-option>
                        <el-option label="文盲或半文盲" value="文盲或半文盲"></el-option>
                        <el-option label="未知" value="未知"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                    <el-button type="primary" @click="up()">
                        返回
                    </el-button>
                </el-form-item>

            </el-form>

        </div>


    </div>
</template>
<script>
    export default {
        data() {
            return {
                //添加的表单
                ruleForm: {
                    name: '',
                    job: '',
                    sex: '',
                    birth: '2021-08-01',
                    education: '',
                    enterprise_id: '',
                },
                enterpriseId: "",
                //校验规则
                rules: {

                    name: [
                        { required: true, message: '请输入名称', trigger: 'blur' },
                        { min: 1, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                    ],
                    job: [
                        { required: true, message: '请选择职务', trigger: 'change' }
                    ],
                    sex: [
                        { required: true, message: '请选择职务', trigger: 'blur' }
                    ],
                    // birth: [
                    //     { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                    // ],

                    education: [
                        { required: true, message: '请选择学历', trigger: 'change' }
                    ],
                }
            }
        },
        mounted() {

            this.enterpriseId = this.$route.query.enterpriseId
        },
        methods: {
            //返回上一层
            up() {
                this.$router.push({ path: '/workes', query: { enterpriseId: this.enterpriseId } })
            },
            //提交表单
            submitForm(formName) {
                //转换日期的格式

                this.ruleForm.birth = this.ruleForm.birth.toLocaleString('chinese', { hour12: false }).split('/').join('-')
                this.$refs[formName].validate((valid) => {
                    if (valid) {

                        //发送请求
                        this.$axios.post(
                            "/api/AddWorkesController/addNewWorkes", this.$qs.stringify({

                                name: this.ruleForm.name,
                                job: this.ruleForm.job,
                                sex: this.ruleForm.sex,
                                birth: this.ruleForm.birth,
                                education: this.ruleForm.education,
                                enterpriseId: this.enterpriseId,

                            })
                        ).then(res => {
                            if (res == 'success') {
                                this.$message({
                                    message: '添加成功',
                                    type: 'success'
                                })
                            } else {
                                this.$message({
                                    message: '添加成功',
                                    type: 'warning'
                                })
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            //重置
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        },
    }
</script>
<style lang="css" scoped>
    .top {
        display: flex;
        text-align: center;
        align-content: center;
        width: 500px;
        height: 800px;
        margin: auto;
    }

    .Top {
        display: flex;
        text-align: center;
        margin: auto;
        align-content: center;

    }
</style>